import React from 'react';
import { Accordion, List } from 'antd-mobile';
import { Link } from 'react-router-dom';
class Home extends React.Component {
    onChange = (key) => {
        console.log(key);
    }
    render() {
        return (
            <div style={{ marginTop: 10, marginBottom: 10 }}>
                <div id='theme'><h2>Antd-mobile</h2> </div>
                <Accordion accordion defaultActiveKey className="my-accordion" onChange={this.onChange}>
                    <Accordion.Panel header="Layout ">
                        <List className="my-list">
                            <List.Item><Link to="/flex">布局</Link> </List.Item>

                        </List>
                    </Accordion.Panel>
                    <Accordion.Panel header="Data Entry" className="pad">
                        <List.Item><Link to="/imagepicker">图片选择</Link></List.Item>
                        <List.Item><Link to="/datepicker">日期选择</Link></List.Item>
                    </Accordion.Panel>
                    <Accordion.Panel header="Navigation" className="pad">
                        <List.Item><Link to="/popover"> Popover 气泡</Link></List.Item>
                        <List.Item><Link to="/navbar"> Navber 导航栏</Link></List.Item>
                    </Accordion.Panel>
                    <Accordion.Panel header="Combination" className="pad">
                        <List.Item><Link to="/result"> Result 结果页</Link></List.Item>
                        {/* <List.Item><Link to="/navbar"> Navber 导航栏</Link></List.Item> */}
                    </Accordion.Panel>
                </Accordion>
            </div>
        );
    }
}

export default Home;